{% extends 'auth/base.html' %}
{% block content %}


{# IP whitelist selector. #}
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">IP Whitelists</h3>
      </div>
      <div class="panel-body">
        <form class="form" role="form">
          <div class="form-group">
            <select class="form-control" id="ip-whitelists-selector"></select>
            <hr>
          </div>
          <div id="selected-ip-whitelist">
            <div id="alerts-box"></div>
            <div class="form-group">
              <label class="control-label">Description</label>
              <input type="text" class="form-control" name="description">
            </div>
            <div class="form-group">
              <label class="control-label">IP subnets</label>
              <div style="font-family:monospace;">
                <textarea class="form-control"
                          rows="5" name="subnets"
                          wrap="off"></textarea>
              </div>
            </div>
            <div class="form-group">
              <button id="update-btn" type="button" class="btn btn-primary">
                Update whitelist
              </button>
              <button id="delete-btn" type="button" class="btn btn-danger">
                Delete whitelist
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


{# "Create new whitelist" modal box, copy pasted straight from bootstrap docs. #}
<div class="modal fade" id="create-ip-whitelist" tabindex="-1"
     role="dialog" aria-labelledby="title-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="title-label">Create new IP whitelist</h4>
      </div>
      <div class="modal-body">
        <div id="alerts-box"></div>
        <div class="form-group">
          <label class="control-label">Name</label>
          <input type="text" class="form-control" name="name">
        </div>
        <div class="form-group">
          <label class="control-label">Description</label>
          <input type="text" class="form-control" name="description">
        </div>
        <div class="form-group">
          <label class="control-label">IP subnets</label>
          <div style="font-family:monospace;">
            <textarea class="form-control"
                      rows="5" name="subnets"
                      wrap="off"></textarea>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary" id='create-btn'>
          Create
        </button>
      </div>
    </div>
  </div>
</div>


{% endblock %}
